import React, { useState } from 'react';
import { CloseOutlined } from '@ant-design/icons';
import { notification } from 'antd';
import { updatePassword } from '../../service';

interface PasswordChangeProps {
  visible: boolean;
  onFlush: (flush: boolean) => void;
  onClose: () => void;
}

const PasswordChange: React.FC<PasswordChangeProps> = ({ visible, onClose, onFlush }) => {
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    // 验证密码是否一致
    if (newPassword !== confirmPassword) {
      notification.error({ message: '新密码和确认密码不一致！' });
      return;
    }

    console.log('修改密码：', { currentPassword, newPassword });

    try {
      // 假设有一个修改密码的接口
      const rsp = await updatePassword({ oldPassword:currentPassword, password:newPassword });
      notification.success({ message: '密码修改成功！' });
      onFlush(true); // 刷新状态
      onClose(); // 关闭弹窗
    } catch (error) {
      onFlush(false);
      notification.error({ message: '密码修改失败！' + error.message });
    }
  };

  if (!visible) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white p-6 rounded-lg shadow-lg w-1/2 md:w-2/3 lg:w-1/4 relative">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-semibold">修改密码</h3>
          <CloseOutlined
            className="cursor-pointer text-gray-500 hover:text-gray-700"
            onClick={onClose}
          />
        </div>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              当前密码
            </label>
            <input
              type="password"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-300"
              placeholder="请输入当前密码"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              新密码
            </label>
            <input
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-300"
              placeholder="请输入新密码"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              确认新密码
            </label>
            <input
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-300"
              placeholder="请再次输入新密码"
              required
            />
          </div>
          <div className="flex justify-end">
            <button
              type="submit"
              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300"
            >
              修改
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default PasswordChange;